<template>
     <div class="jx-big">    
        <div class="forms">
            <div class="forms-right-img"> 
                <img src="./../../../assets/images/code.jpg"  class="img"/>
            </div>
            <p>请扫码关注公共账号反馈问题</p>
            <div class="saveBtn">
                <button class="button-style saveBtn" @click="Dialog">其他方式反馈</button>
            </div>
        </div>
         <el-dialog :close-on-click-modal="false" title="问题反馈" :visible.sync="dialog" width='760px'  @close="closeDialog" >
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item label="问题描述" prop="content">
                    <el-input type="textarea" v-model="form.content" :rows="11" maxlength="500" @input="dataInput" > </el-input>
                    <p style=" position:absolute;  right: 0px; bottom: 3px; color:#bbbbbb; font-size:12px;"> {{form.num}} /500</p>
                </el-form-item>     
            </el-form>
            <div class="saveBtn">
                    <div class="button-style save" @click="save('form')">提 交</div>
             </div>
         </el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                dialog:false,
                form:{
                    content:'',
                    num:500,
                },
                rules:{
                     content: [
                        { required: true, message: '请填写问题说明', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            //点击弹窗效果
            Dialog(){
               this.dialog = true
            },
            closeDialog(){
                 this.$nextTick(()=>{
                    this.$refs.form.resetFields()
                    this.form.num = 500
                 })
            },
            //字数信息
            dataInput(){
                var txtVal = this.form.content.length;
                this.form.num = 500 - txtVal
             
            },
            //保存
            save(form){
                let self = this
                self.$refs[form].validate((valid) => {
                    if (valid) {
                        self.$http.post('/tes/system-problem',{
                        content:this.form.content
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        self.$refs[form].resetFields()
                        self.dialog = false
                        self.form.num=0
                        }else{
                            self.$message.error(res.message)
                        }
                    })

                  }
               })
            }   
            
        }
    }
</script>
<style scoped>
    .el-form{
        padding-left: 20px;
    }
  .el-form-item>>>.el-input__inner {
        width: 250px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
    }
    .el-form>>>.el-textarea__inner {
        height: 250px;
        width: 645px;
        resize: none;
    }
    .el-form-item>>>.el-form-item__content{
        height: auto;
        margin-top: 10px
    }
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
.jx-big {
    padding-left: 50px;
    padding-top: 60px;
    .forms{
        text-align: center;
        margin: 20px auto;
        width: 202px;
        height: 202px;
        .forms-right-img{
            box-sizing: border-box;
            border: 1px solid $border-gray;
                .img{
                    width: 200px;
                    height: 200px;
                }
        }
        &>p{
                line-height: 60px;
        }
       
    }
    .saveBtn{
        text-align: center;
    }
}
</style>